<template>
 <div>
    <TableBar 
    :columns="columns"
    @changeColumn="changeColumn"
    :layout="layout"
  >
    <el-row slot="top" style="margin-bottom: 25px;">
      <span class="demonstration">进货登记时间：</span>
      <el-date-picker
        v-model="time"
        type="datetimerange"
        format="yyyy-MM-dd HH:mm:ss" 
        value-format="yyyy-MM-dd HH:mm:ss"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        @change="chooseTime(time)">
      </el-date-picker>
      <el-button type="primary" plain @click="getInfoBySelectTime">搜索</el-button>
    </el-row>
    <el-row slot="bottom" :gutter="10" type="flex">
      <el-col >
        <el-button
          type="primary"
          plain
          size="small"
          @click="addEvent"
        >添加
        </el-button>
      </el-col>
      <el-col>
        <el-tooltip
          effect="dark"
          content="导入原辅料信息"
          placement="top-start"
        >
          <el-upload
            action="http://120.77.156.205:9608/processing/processing-material-enter-info/excel"
            :show-file-list="false"
          >
            <el-button
              plain
              type="success"
              size="small"
              @click="refresh"
            >导入</el-button>
          </el-upload>
        </el-tooltip>
      </el-col>
      <el-col>
        <el-tooltip
          effect="dark"
          content="导出为EXCEL文件"
          placement="top-start"
          >
          <el-button 
            type="primary" 
            plain size="small" 
            @click="downLoadExcel"
          >导出</el-button>
        </el-tooltip>
      </el-col>
      
      <el-col>
          <el-tooltip effect="dark" content="批量删除投入品信息">
            <el-button
              plain
              type="danger"
              size="small"
              @click="removeMaterial"
              v-auth="'processing_material_access_delete'"
              class="el-icon-delete-solid"
            ></el-button
          ></el-tooltip>
        </el-col>
    </el-row>
    </TableBar>

    <!-- 表格区域开始 -->
    <Table 
      :columns="columns"
      ref="tableRef"
      @selectData = "setData"
      :allList="allList"
      :page="page"
    />
    <!-- 表格区域结束 -->

    <!-- 添加表单开始 -->
    <AddForm
      v-show="dialogVisible"
      @close="closeEvent"
      :TypeList="TypeList"
      :pickerOptions="pickerOptions"
      :dialogVisible="dialogVisible"
      @closeDialog="closeDialog"
      :dialogTitle="dialogTitle"
      :message="message"
    />
    <!-- 添加表单结束 -->
 </div>
</template>

<script>
import TableBar from '../../common/TableBar.vue'
import Table from './Table.vue'
import AddForm from './AddForm.vue'
import {
  getMaterialInfoByTime,
  delMaterialInfo,
} from '../../../Api/processingplant/process_material_enter_info'

export default {
  name:'MainTableBar',
  inject: ["reload"],
  components: { 
    TableBar,
    Table,
    AddForm
  },
  props:{
    columns: {
      Array,
    },
    
    judge:{
      Boolean
    },
  },
  data(){
    return{
      //所选时间范围
      search_data:{
        startTime : "",
        endTime : ""
      },
      value:[new Date],
      //是否显示表单
      dialogVisible: false,
      //表头
      dialogTitle:'',
      //入库类型
      TypeList: [
        {
          id:0,
          type:'手动'
        },
        {
          id:1,
          type:'自动'
        }
      ],
      //批量选择信息
      selectList:[],
      time:[],
      input:'',
      form:{},
      pickerOptions:{
        disabledDate(time) {
            return time.getTime() > Date.now();
          },
      },
      stockType:[],
      layout: "search, refresh, column",
      hiddenBtn: false,
      //添加信息
      addInfo:{
        count:'',
        craftName:'',
        enterTime:'',
        materialName:'',
        price:'',
        registrant:'',
        specification:'',
        supplierName:''
      },
      message:'立即添加',
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      // 表格数据
      allList: [],
    }
  },
  computed: {
  },
  watch: {
    judge:function(){
      this.setAllList()
    },
  },
  created(){
  },
  methods:{
    //选择时间范围
    chooseTime(val){
      this.time = val
      console.log("time",this.time)
      if(this.time == null){
        this.search_data.startTime = null;
        this.search_data.endTime = null;
      }else{
        var stime = this.time[0];
        this.search_data.startTime = stime;
        var etime = this.time[1];
        this.search_data.endTime = etime;
        console.log("time-------",this.search_data)
      }
    },
    //根据时间筛选数据
    async getInfoBySelectTime() {
      const { data: res } = await getMaterialInfoByTime(
        this.page.current,
        this.page.pageSize,
        this.search_data.startTime,
        this.search_data.endTime
      );
      console.log("模糊查询time。。。。。",res)
      if (res.statusCode !== 20000) {
        console.error(res.message);
      }else{
        if (res.data.records.length === 0) {
          return this.$message.warning("搜索范围内无数据");
        }
        this.allList = res.data.records;
        this.page.total = res.data.total;
      }
    },
    
    //打开添加表单
    addEvent(row){
      this.dialogTitle='添加原辅料入库信息'
      this.dialogVisible = true;
    },
    //关闭表单
    closeDialog() {
      this.dialogVisible = false;
    },
    //选择隐藏列
    changeColumn(newcolumns) {
      console.log(newcolumns);
      this.columns = newcolumns;
    },
    //导入Excel
    refresh() {
      this.$refs.tableRef.setAllList();
    },
    //导出EXCEL
    downLoadExcel() {
      let name = "原辅料入库信息";
      window.location.href = `http://120.77.156.205:9608/processing/processing-material-enter-info/download/${name}`;
    },
    //获取所要删除的原辅料
    setData(list){
      this.selectList = list
      console.log("数组内容",this.selectList)
    },
    getinfo(){
        this.judge = !this.judge
    },
    //批量删除原辅料信息
    async removeMaterial() {
      const confirmResuly = await this.$confirm(
        "此操作将永久删除所选原辅料信息, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResuly !== "confirm") {
        return this.$message.info("已取消删除");
      }
      for(let index in this.selectList){
          this.selecOne(this.selectList[index].id)
      }
      this.$emit("getinfo")
      this.reload()
    },
    async selecOne(id){
      const {data : res} = await delMaterialInfo(id)
      console.log(res)
      if(res.statusCode == 20000){
        this.$message.success(res.message)
      }else{
        this.$message.error(res.message)
      }
    },
    //关闭表单
    closeEvent() {
      this.setAllList();
    },
    //下载表格
    
    
  }
}
</script>

<style>
    body{
      display: inline;
    }
</style>